<template>
  <div id="detail">
    <van-nav-bar title="" left-arrow size="30">
      <template #left>
        <van-icon name="arrow-left" size="20" @click="back" />
        <h3 style="margin: 90px; width: 120px">{{ article_detail.title }}</h3>
      </template>

      <template #right>
        <van-icon @click="like" v-if="isClick == 0" name="like-o" size="20" />
        <van-icon @click="like" v-if="isClick == 1" name="like" size="20" />
        <span>{{ clickNum }}</span>
      </template>
    </van-nav-bar>
    <div class="content">
      <img :src="uploads + article_detail.img" alt="" />
      <p>
        {{ article_detail.content }}
      </p>
      <span>{{ article_detail.create_time }}</span>
    </div>
    <hr />
    <div class="senior">
      <van-grid>
        <van-grid-item :to="'/seniorProfile/' + article_detail.user_id">
          <img
            :src="uploads + article_detail.user_img"
            style="width: 80px; border-radius: 50px"
          />
        </van-grid-item>
      </van-grid>
      <div>
        <h4>{{ article_detail.username }}</h4>
        <p>{{ article_detail.school }}</p>
      </div>
      <div>
        <button
          class="follow"
          @click="follow"
          :style="{ backgroundColor: bg_color, color: f_color }"
        >
          {{ content_follow }}
          <svg
            class="follow"
            t="1620789406181"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="1923"
            width="20"
            height="20"
          >
            <path
              d="M717.7 642.7c7.5-10.9 4.7-25.9-6.3-33.4-35.6-24.4-75.9-41-120.4-49.9 96.6-36.6 165.2-130 165.2-239.4 0-141.3-114.6-255.9-255.9-255.9s-255.9 114.7-255.9 256c0 111.6 71.4 206.5 171 241.5-45.4 9.4-87.3 25.7-125.4 48.8-51 31-94.9 74.1-130.4 128.1-59.9 91.1-75.1 181.2-75.7 185l-1.3 8.3c-2 13.1 7 25.4 20.1 27.4 1.2 0.2 2.5 0.3 3.7 0.3 11.6 0 21.9-8.5 23.7-20.4l1.2-8c0.5-2.9 14.8-84.7 68.4-166.3C271.6 655.5 376.8 600 512.3 600c66.7 0 124.6 16.5 172.1 48.9 10.9 7.6 25.8 4.8 33.3-6.2zM292.4 320.1c0-55.5 21.6-107.7 60.9-147s91.5-60.9 147-60.9 107.7 21.6 147 60.9 60.9 91.5 60.9 147-21.6 107.7-60.9 147-91.5 60.9-147 60.9-107.7-21.6-147-60.9-60.9-91.4-60.9-147zM936.5 784.1H832.9V680.5c0-13.3-10.7-24-24-24s-24 10.7-24 24v103.6H681.3c-13.3 0-24 10.7-24 24s10.7 24 24 24h103.6v103.6c0 13.3 10.7 24 24 24s24-10.7 24-24V832.1h103.6c13.3 0 24-10.7 24-24s-10.8-24-24-24z"
              p-id="1924"
              fill="#ffffff"
            ></path>
          </svg>
        </button>
      </div>
    </div>
    <div style="height: 40px"></div>
    <bottom :active="0"></bottom>
  </div>
</template>

<script>
import axios from "axios";
import { Toast } from "vant";
import bottom from "@/components/bottom.vue";
export default {
  components: { bottom },
  data() {
    return {
      clickNum: 12,
      isClick: "0",
      bg_color: "#ea8b8b",
      f_color: "white",
      content: "+关注",
      content_follow: "+关注",
      article_detail: [],
      user_id: "",
      bgzz_user_id: "",
      article_id: "",
      uploads: this.$store.state.uploads,
    };
  },
  created() {
    axios
      .get("/api/qbs/api/articledetail.php?id=" + this.$route.params.id)
      .then((response) => {
        console.log(response);
        console.log(response.data.data);
        localStorage.setItem("article_id", response.data.data.id);
        localStorage.setItem("bgzz_user_id", response.data.data.user_id);

        this.article_detail = response.data.data;
      });
    console.log("created");
  },

  methods: {
    back() {
      this.$router.go(-1);
    },
    like() {
      if (this.isClick == 0) {
        this.isClick = 1;
        this.clickNum = this.clickNum + 1;
        console.log(this.clickNum);

        let myuser_id = localStorage.getItem("login_user_id");
        let _article_id = localStorage.getItem("article_id");
        axios
          .get("/api/qbs/api/shoucang_add.php", {
            params: {
              user_id: myuser_id,
              article_id: _article_id,
            },
          })
          .then((response) => {
            console.log(response);
          });
        Toast({
          message: "已收藏",
          icon: "like",
        });
      } else {
        this.isClick = 0;
        this.clickNum = this.clickNum - 1;
        Toast({
          message: "已取消收藏",
          icon: "like",
        });
      }
    },
    follow() {
      this.liked = !this.liked;
      if (this.liked) {
        this.content_follow = "取消关注";
        this.bg_color = "#ea8b8b";
        this.ft_color = "white";

        let myuser_id = localStorage.getItem("login_user_id");
        let _bgzz_user_id = localStorage.getItem("bgzz_user_id");
        axios
          .get("/api/qbs/api/guanzhu_add.php", {
            params: {
              user_id: myuser_id,
              bgzz_user_id: _bgzz_user_id,
            },
          })
          .then((response) => {
            console.log(response);
          });

        Toast({
          message: "已关注",
          icon: "like",
        });
      } else {
        this.content_follow = "+关注";
        this.bg_color = "#ea8b8b";
        this.ft_color = "white";
        Toast({
          message: "已取关",
          icon: "like",
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
#detail {
  margin-top: 0;
}
.likeimg {
  height: 50px;
  width: 50px;
}
.content img {
  width: 100%;
}
.icon {
  margin: 10px;
}
.senior {
  position: relative;
  display: flex;
  justify-content: flex-start;
}
button {
  background-color: white;
  position: absolute;
  right: 20px;
  top: 30px;
  border: 1px solid #ea8b8b;
  color: #ea8b8b;
}
.van-toast__icon {
  color: red;
}
.van-nav-bar {
  background: none;
}
.van-icon-like {
  color: red;
}
.van-icon-like-o {
  color: red;
}
h3 {
  color: black;
}

.follow {
  margin: 0;
}
.van-icon::before {
  color: lightpink;
}
</style>
